<template>
	<view>
		<view class="searchBox">
			<view class="inputBox">
				<image src="/static/pages/index/searchImg.png" mode="" class="searchImg"></image>
				<input class="inpt" placeholder="请输入活动名称" v-model="name"
					placeholder-style="color:#9DA0A9;font-size:26rpx;" />
			</view>
			<view class="searchInput" @click="init">
				搜索
			</view>
		</view>
		<!-- 内容 -->
		<view class="activityContent" v-if="list.length!=0">
			<view class="activityList" v-for="(item,index) in list" @click="hd_detail(item.id)">
				<view class="ctime">
					<text class="ctimew">活动时间:</text>
					<text style="margin-left: 20rpx;">{{item.endtime_text}}</text>
				</view>
				<view class="wire">
					
				</view>
				<view class="acName">
					{{item.name}}
				</view>
				<view class="fundsNum">
					<view class="fundsNum1">
						预算：
					</view>
					<view class="fundsNum2">
						{{item.money}}
					</view>
				</view>
				<view class="quota">
					<view class="quota1">
						剩余场次:
					</view>
					<view class="quota2">
						{{item.quota}}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="souji">
			<view class="">
				历史搜索
			</view>
			<image src="../../static/pages/index/center_icon_delete@2x.png" mode="" @click="clear_lishi"></image>
		</view> -->
		
		<!-- <view class="list">
			<view class="li">
				周年庆开幕式
			</view>
			<view class="li">
				周年庆开幕式
			</view>
			<view class="li">
				周年庆开幕式
			</view>
			<view class="li">
				周年庆开幕式
			</view>
			<view class="li">
				周年庆开幕式
			</view>
			<view class="li">
				周年庆开幕式
			</view>
		</view> -->
		<!-- <view class="zhezhao" v-if="tui">
			<view class="kuang">
				<image class="cha" src="/static/pages/index/cloose.png" mode="" @click="tuiding"></image>
				<view class="kuang_title">确定要删除历史搜索记录吗？</view>
				<view class="liecan">
					<view class="qu" @click="shan(1)">取消</view>
					<view class="que" @click="shan(2)">确定</view>				
				</view>			
			</view>
		</view> -->
	</view>
</template>

<script>
	import {regionActivity} from '@/request/api.js';
	export default {
		data() {
			return {
				tui:false,
				cate_id:0,
				name:'',
				page:1,
				list:[]
			}
		},
		methods: {
			init(){
				let _this = this ;
				if(_this.name==''){
					uni.showToast({
						title:"搜索内容不能为空",
						icon:"none"
					})
					return
				}
				_this.list=[]
				let data = {
					cate_id:0,
					name:_this.name,
					page:_this.page
				}
			 regionActivity(data).then(res=>{
					if(res.code==1){
						console.log(res)
						if(res.data.activity.data.length!=0){
							_this.list=res.data.activity.data;
							
						}else{
							uni.showToast({
								title:"暂无此相关内容",
								icon:"none"
							})
						}
						
					}
				})
			},
			tuiding:function(){
				this.tui=false
				
			},
			hd_detail:function(id){
				console.log('跳转跳转')
				uni.navigateTo({
					url:`/pagesA/DLR/activityDetails?id=${id}`
				})
				
			},
			shan:function(a){
				if(a==1){
					this.tui=false
				}else{
					// 确定删除
				}
				
			},
			
			clear_lishi:function(){
				this.tui=true
			}
		}
	}
</script>

<style lang="scss">
	.zhezhao{
		background: rgba(0,0,0,0.3);
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.kuang{
			padding: 68rpx;
			
			background: #FFFFFF;
			margin: 0 40rpx;
			width: 100%;
			border-radius: 32rpx;
			position: relative;
			.cha{
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.kuang_title{
				text-align: center;
			}
			.liecan{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 80rpx;
				.qu{
					padding: 20rpx 70rpx;
					background: rgba(24, 85, 246, 1);
					font-size: 30rpx;
					border-radius: 3000rpx;
					color: #fff;
				}
				.que{
					padding: 20rpx 70rpx;
					background: rgba(216, 222, 240, 1);
					font-size: 30rpx;
					border-radius: 3000rpx;
					color: rgba(24, 85, 246, 1);
				}
			}
		}
		
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		padding:40rpx ;
		.li{
			padding: 10rpx 25rpx;
			background: #F7F8FA;
			color: #000000;
			border-radius: 1000px;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.souji{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		image{
			width: 40rpx;
			height: 42rpx;
		}
	}
	.searchBox {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 26rpx;
	
		.inputBox {
			width: 580rpx;
			height: 70rpx;
			background-color: #F0F1F5;
			border-radius: 60rpx;
			display: flex;
	
			.searchImg {
				width: 28rpx;
				height: 28rpx;
				margin: 21rpx 21rpx 0 24rpx;
			}
	
			.inpt {
				margin-top: 15rpx;
			}
		}
	
		.searchInput {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2E2F33;
			margin-right: 40rpx;
			margin-top: 17rpx;
		}
	}
	.activityContent{
		width: 100%;
		overflow: hidden;
		padding-bottom: 160rpx;
		.activityList{
			width: 670rpx;
			height: 330rpx;
			margin: 40rpx auto 0;
			overflow: hidden;
			.ctime{
				color: #979BA6;
				font-size: 26rpx;
				margin-left: 22rpx;
			}
			.wire{
				background-color: #ebecee;
				width: 100%;
				height: 4rpx;
				margin-top: 23rpx;
			}
			.acName{
				font-size: 36rpx;
				color: #313233;
				margin-top: 29rpx;
				margin-left: 22rpx;
			}
			.fundsNum{
				display: flex;
				margin-top: 49rpx;
				margin-left: 22rpx;
				.fundsNum1{
					color: #313233;
					font-size: 36rpx;
				}
				.fundsNum2{
					color: #313233;
					font-size: 36rpx;
					margin-left: 123rpx;
				}
			}
			.quota{
				display: flex;
				margin-top: 49rpx;
				margin-left: 22rpx;
				.quota1{
					color: #313233;
					font-size: 36rpx;
				}
				.quota2{
					color: #313233;
					font-size: 36rpx;
					margin-left: 145rpx;
				}
			}
		}
	}
</style>
